<template>
    <div class="sign">
        <div class="loginTitle">欢迎注册账号 <span style="font-family: 华文细黑">:)</span></div>
        <div class="signForm" >
            <div class="input userName">
                <div>
                    <i class="bi bi-person-fill mr-3"></i>
                    <div class="d-inline-block">
                        <div class="mb-1">
                            <small class="text-black-50">用户名/ Name</small>
                        </div>
                        <input type="text" v-model="sign.userName" placeholder="用户名称">
                    </div>
                </div>
            </div>
            <div class="input userEmail">
                <div>
                    <i class="bi bi-envelope-fill mr-3"></i>
                    <div class="d-inline-block">
                        <div class="mb-1">
                            <small class="text-black-50">邮箱/ Email</small>
                        </div>
                        <input type="email" v-model="sign.userEmail" placeholder="绑定邮箱">
                    </div>
                </div>
            </div>
            <div class="input userPassword">
                <div>
                    <i class="bi bi-key-fill mr-3"></i>
                    <div class="d-inline-block">
                        <div class="mb-1">
                            <small class="text-black-50">密码/ Password</small>
                        </div>
                        <input type="password" v-model="sign.userPwd" placeholder="密码">
                    </div>
                </div>
            </div>
              <div class="input userPassword">
                <div>
                    <i class="bi bi-key-fill mr-3"></i>
                    <div class="d-inline-block">
                        <div class="mb-1">
                            <small class="text-black-50">电话/ phone</small>
                        </div>
                        <input type="password" v-model="sign.userPhone" placeholder="密码">
                    </div>
                </div>
            </div>
            <div class="input userGender">
                <div>
                    <i class="bi bi-exclude mr-3"></i>
                    <div class="d-inline-block">
                        <div class="mb-1">
                            <small class="text-black-50">性别/ Gender</small>
                        </div>
                        <el-radio v-model="sign.userSex" label="1">男性</el-radio>
                        <el-radio v-model="sign.userSex" label="2">女性</el-radio>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="mt-4" style="text-align: center">
            <el-button type="warning" @click="AddUser()" round plain> 注 册 账 号 </el-button>
            <el-link type="info" @click="toRoute('/login/toLogin/user')">已有用户？去登录！</el-link>
        </div>
    </div>
</template>

<script>
    import $ from "jquery";

    export default {
        name: "toSign",
        data(){
            return{
                sign:{},
            }
        },
        mounted() {
            this.iconColor()
        },
        methods:{
            AddUser(){
                this.axios
                .post("https://localhost:44347/api/app/p-user/roll",this.sign)
                .then(s=>{
                    if(s.data==10)
                    {
                        alert("注册成功")
                        this.$router.push('/login/toLogin/user');
                    }
                    else
                    {
                        alert("注册失败")
                    }
                })

            },
            toRoute(path){
                this.$router.push(path);
            },
            iconColor(){
                $(".input input").on("focus",function () {
                    $(this).parent().siblings(".bi").addClass("iconColor");
                }).on("blur",function () {
                    $(this).parent().siblings(".bi").removeClass("iconColor")
                })
            }
        }
    }
</script>

<style scoped>

</style>